<template>
  <div>
    <!--      动态的数据 -->
    <el-table :data="rolelist" border style="width: 100%">
          <!--  -->
      <el-table-column prop="id" label="角色编号" width="180">
      </el-table-column>
      <!--  -->
      <el-table-column prop="rolename" label="角色名称" width="180">
      </el-table-column>
      <!--  -->
      <el-table-column label="状态">
        <template slot-scope="item">
          <div>
            <el-tag v-if="item.row.status == 1">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </div>
        </template>
      </el-table-column>
      <!--  -->
      <el-table-column label="操作">
        <template slot-scope="item">
          <div>
            <!-- 传值给弹框 -->
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              circle
              @click="edit(item.row.id)"
            ></el-button>
            <el-button
            @click="del(item.row.id)"
              type="danger"
              size="mini"
              icon="el-icon-delete"
              circle
            ></el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import {roleDel} from '../../util/request/api'
export default {
  data() {
    return {
      // tableData: [
      //   {
      //     date: "2016-05-02",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1518 弄",
      //   },
      //   {
      //     date: "2016-05-04",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1517 弄",
      //   },
      //   {
      //     date: "2016-05-01",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1519 弄",
      //   },
      //   {
      //     date: "2016-05-03",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1516 弄",
      //   },
      // ],
    };
  },
  computed: {
    ...mapGetters({
      // rolelist的内容就是函数下获取的内容modules
      rolelist: "role/getRoleList",
    }),
  },
  mounted() {
    // 组价一加载就调用角色列表
    this.getRoleList();
  },
  methods: {
    ...mapActions({
      getRoleList: "role/getRoleAction",
    }),
    edit(id) {
      //传给父组件，打开编辑弹窗,id是辨识id
      this.$emit("edit",id);
    },
    // 封装一个删除事件
    del(id){
      this.$confirm('此操作将永久删除该行所有信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 调用删除接口
          roleDel({id})
          .then(res=>{
            if (res.code==200) {
              this.$message.success(res.msg)
              // 重新获取数据
              this.getRoleList(); 
            }else{
              this.$message.error(res.msg)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  },
};
</script>
<style scoped>
</style>